import React from 'react'
import {connect} from 'dva'
import {Table, Row, Col, Form, Input, Button, Popconfirm} from 'antd';
import RightBox from "../../../components/commons/RightBox";
import RIGHT from "../../../utils/RightConstants";
import Constants  from '../../../utils/Constants';
import CustomsDetail from '../../../components/basedata/customsDetail';
const FormItem = Form.Item;


const customs = Form.create()(class Customs extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'customs/getListForPage', payload: { page: Constants.DEFAULT_PAGE } });
    }

    onEdit = (id) => {

        this.props.dispatch({
            type: 'customs/getById',
            payload: {id}
        });
        this.customsDetail.handleOpen();
    };

    handleSearch = (flag) => {
        let newPage = this.props.customs.page;
        if(flag) newPage.page = 1;
        this.props.dispatch({
            type: 'customs/getListForPage',
            payload: {
                page: newPage
            }
        });
    };

    columns = [
        {title: '海关名称',dataIndex: 'companyname',key: 'companyname'},
        {title: '收款人',dataIndex: 'payeename',key: 'payeename'},
        {title: '收款人账号',dataIndex: 'payeeno',key: 'payeeno'},
        {title: '开户银行',dataIndex: 'bankName',key: 'bankName'},
        {title: '开户支行',dataIndex: 'bankbranch',key: 'bankbranch'},
        {title: '创建人',dataIndex: 'creatorName',key: 'creatorName'},
        {title: '操作',width: '100px',
            render: (record) => {
                return (
                    <span>
                        <a href="#" onClick={this.onEdit.bind(this, record.id)}>编辑</a><span className="ant-divider"/>

                        <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={() => {
                            this.props.dispatch({
                                type: 'customs/deleteCustoms',
                                payload: {
                                    id: record.id,
                                    onSuccess: () => this.handleSearch()
                                }
                            });
                        }} okText="是" cancelText="否">
                            <a href="#">删除</a>
                        </Popconfirm>
                    </span>
                );
        }
    }];

    render(){

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.customs.page.size,
            current: this.props.customs.page.page,
            total: this.props.customs.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.customs.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'customs/getListForPage',
                    payload: {
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.customs.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'customs/getListForPage',
                    payload: {
                        page: newPage
                    }
                });
            }
        }



        return (
            <div>
                <Row>
                    <Col span={7}>
                        <Button type="primary" icon="plus" style={{ marginBottom: 20 }} onClick={this.onEdit.bind(this, null)}>添加海关信息</Button>
                    </Col>
                </Row>

                <Table rowKey="id" dataSource={this.props.customs.list} loading={this.props.loading} columns={this.columns} bordered={true} size={'middle'} scroll={{ x: true }} pagination={pagination} />
                <CustomsDetail wrappedComponentRef={(inst) => this.customsDetail = inst} refreshList={this.handleSearch} />
            </div>
        );
    }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.customs, customs: state.customs
    };
}

export default connect(mapStateToProps)(customs);
